<template>
	<view class="content">
		<view class="top">
			<u--text
				:text="
					detailInfo.refundStatus == 2
						? '已退款'
						: detailInfo.refundStatus == 3
						? '退款拒绝'
						: '退款中'
				"
				size="36rpx"
				lines="1"
				color="#fff"
			></u--text>
			<u--text
				v-if="detailInfo.refundStatus == 1"
				:text="detailInfo.refundTime + ' 退费预计3-5天到账'"
				size="28rpx"
				lines="1"
				color="#fff"
				margin="18rpx 0 0"
			></u--text>
		</view>

		<view class="address">
			<text class="address-tlt">退费信息</text>
			<view class="news">
				<image :src="detailInfo.raceImg" class="news-img" mode="aspectFill"></image>
				<view class="news-right">
					<u--text
						:text="detailInfo.raceName"
						bold
						size="32rpx"
						lines="1"
						margin="8rpx 0 24rpx"
					></u--text>
					<u-icon
						name="map"
						color="#999"
						size="16"
						:label="detailInfo.cityRegion"
						labelSize="28rpx"
						labelColor="#999"
					></u-icon>
					<view style="margin-top: 20rpx">
						<u-icon
							name="clock"
							color="#999"
							size="14"
							:label="detailInfo.groupStartTime"
							labelSize="26rpx"
							labelColor="#999"
						></u-icon>
					</view>
				</view>
			</view>
			<u-cell-group :border="false">
				<!-- <u-cell title="退款原因" :border="false" value="张三丰"></u-cell> -->
				<u-cell title="退款金额" :border="false" :value="'￥' + detailInfo.refundMoney"></u-cell>
				<u-cell title="申请时间" :border="false" :value="detailInfo.refundTime"></u-cell>
				<u-cell title="订单编号" :border="false" :value="detailInfo.orderId"></u-cell>
				<template v-if="detailInfo.refundStatus == 2">
					<u-line dashed margin="20rpx 0 14rpx" color="#aaa"></u-line>
					<u-cell
						title="温馨提示"
						:border="false"
						titleStyle="font-weight:600;color:#333;"
					></u-cell>
					<u-cell title="金额退回原微信支付账户" :border="false"></u-cell>
					<u-cell :title="`退费金额：￥${detailInfo.refundMoney}`" :border="false"></u-cell>
				</template>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			detailInfo: {}
		}
	},
	onLoad(options) {
		const eventChannel = this.getOpenerEventChannel()
		if (!eventChannel) return
		eventChannel.on('sendData', (data) => {
			this.detailInfo = data
		})
	},
	methods: {
		getDetailInfo(id) {
			/* prettier-ignore */
			this.$https( true, 'post', {
				url: '/Home/GoodsOrder/getOrderInfo',
				data: {
					token: uni.getStorageSync('token'),
					id: this.id
				}
			},(res) => {
				this.detailInfo = res.data
				console.log(this.orderSteps)
			})
			/* prettier-ignore */
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	padding: 0 0 20rpx;
	position: relative;
}
.top {
	width: calc(100% - 120rpx);
	background: #0071c6;
	padding: 50rpx 60rpx;
	margin-bottom: 30rpx;
}
.address {
	padding: 24rpx 32rpx;
	width: calc(702rpx - 64rpx);
	overflow-x: hidden;
	background-color: #fff;
	border-radius: 16rpx;
	margin: 0 auto 24rpx;
	&-tlt {
		font-size: 28rpx;
		color: #898989;
		border-bottom: 1px solid #e9e9e9;
		display: block;
		padding-bottom: 18rpx;
		&:before {
			display: inline-block;
			content: '';
			width: 8rpx;
			height: 30rpx;
			float: left;
			margin: 4rpx 10rpx 0;
			background-color: #0071c5;
		}
	}
	.news {
		display: flex;
		position: relative;
		margin: 24rpx 0;
		padding-bottom: 26rpx;
		border-bottom: 1px #e9e9e9 dashed;
		&-wrap {
			width: calc(100% - 40rpx);
			background-color: #fff;
			margin-bottom: 20rpx;
			padding: 26rpx 20rpx;
		}
		&-img {
			width: 160rpx;
			height: 160rpx;
		}
		&-right {
			margin-left: 26rpx;
			max-width: 500rpx;
			width: 500rpx;
		}
	}
}
::v-deep {
	.u-cell .u-cell__body {
		padding: 6rpx 0;
		.u-cell__title-text {
			font-size: 28rpx;
			color: #898989;
		}
		.u-cell__value {
			font-size: 28rpx;
			font-weight: 500;
			color: #231815;
		}
	}
	.u-button {
		margin: 0;
	}
}
</style>
